<template>
    <div class="content">

        <div class="top-line">

            <el-radio-group v-model="tabPosition" style="margin-right:20px;" @input="selectLabel">
                <el-radio-button label="year">年</el-radio-button>
                <el-radio-button label="month">月</el-radio-button>
                <el-radio-button label="day">日</el-radio-button>
            </el-radio-group>

            <el-date-picker v-model="dateValue" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" @change="dateValueChange"
                value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>

        </div>


        <div class="second-line" style="margin-top:20px">

            <div class="card-white" style="height: 140px;  flex:1;">
                <div class="text1">12365984.00</div>
                <div class="text2">销售收入总额(元)</div>
            </div>
            <div class="card-white" style="height: 140px; margin-left:20px; flex:1">
                <div class="text1">12365984</div>
                <div class="text2">商品出库总数(件)</div>

            </div>
            <div class="card-white" style="height: 140px; margin-left:20px; flex:1">
                <div class="text1">1236598</div>
                <div class="text2">会员数(人))</div>

            </div>

        </div>

        <!-- 销售柱状图 -->
        <div style="border-radius:10px;background-color:white;margin-top:20px; display: flex; flex-direction: column;">
            <div ref="saleForm" style="height:285px; margin-left: 10px; margin-top: 20px;"></div>
        </div>

        <div style="display: flex; margin-top: 20px;">
            <div style="border-radius:10px;background-color:white; display: flex; flex-direction: column; width: 400px;">
                <div ref="sortPieForm" style="height:285px; margin-left: 10px; margin-top: 20px;"></div>
            </div>

            <div style="border-radius:10px;background-color:white; display: flex; flex-direction: column; margin-left: 20px; flex: 1;">
                <div ref="vipAddForm" style="height:285px; margin-left: 10px; margin-top: 20px;"></div>
            </div>

            </div>
        </div>



    </div>
</template>

<script>
import * as echarts from 'echarts';
// 基于准备好的dom，初始化echarts实例
// 指定图表的配置项和数据
var saleOption = {
    title: {
        text: '销售近况(近30天)'
    },
    tooltip: { formatter: '{b}日<br/>销售额: {c}万元 ', trigger: 'axis' },
    legend: {
        data: []
    },
    xAxis: {
        data: ['09.01', '09.02', '09.03', '09.04', '09.05', '09.06', '09.07', '09.08', '09.09', '09.10', '09.11', '09.12', '09.13', '09.14', '09.15', '09.16', '09.17', '09.18', '09.19', '09.20', '09.21', '09.22', '09.23', '09.24', '09.25', '09.26', '09.27', '09.28', '09.29', '09.30']
    },
    yAxis: {
        axisLabel: { align: 'center', formatter: '{value}' }
    },
    grid: {
        left: '5%',

    },
    series: [
        {
            color: "#333",
            name: '销量1',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 5, 20, 36, 10, 10, 5, 20, 36, 10, 10, 5, 20, 36, 10, 10, 5, 20, 36, 10, 10, 5, 20, 36, 10, 10,]
        },
        {
            name: '销量2',
            type: 'bar',
            data: [6, 20, 36, 10, 10, 5, 20, 36, 10, 10, 5, 20, 36, 10, 10, 5, 20, 36, 10, 10, 5, 20, 36, 10, 10, 5, 20, 36, 10, 10,]
        },
        {
            name: '销量3',
            type: 'bar',
            data: [8, 20, 36, 10, 10, 5, 20, 36, 10, 10, 5, 20, 36, 10, 10, 5, 20, 36, 10, 10, 5, 20, 36, 10, 10, 5, 20, 36, 10, 10,]
        }
    ]
};

var sortPieOption = {
    title: {
        text: '商品销售近况(近30天)'
    },
    tooltip: { trigger: 'item' },
    legend: {
        data: []
    },
    grid: {
        left: '5%',

    },
    series: [
        {
            name: '商品销售分布',
            type: 'pie',
            radius: '50%',
            data: [
                { value: 1048, name: '洗漱用品', itemStyle: { color: "#293B69" } },
                { value: 735, name: '零食', itemStyle: { color: "#4462AA" } },
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        },
    ]
};

var vipAddOption = {
    title: {
        text: '会员新增(近30天)'
    },
    tooltip: { formatter: '{b}日<br/>新增数量: {c}人 ', trigger: 'axis' },
    legend: {
        data: []
    },
    xAxis: {
        data: ['09.01', '09.02', '09.03', '09.04', '09.05', '09.06', '09.07', '09.08', '09.09', '09.10', '09.11', '09.12', '09.13', '09.14', '09.15', '09.16', '09.17', '09.18', '09.19', '09.20', '09.21', '09.22', '09.23', '09.24', '09.25', '09.26', '09.27', '09.28', '09.29', '09.30']
    },
    yAxis: {
        axisLabel: { align: 'center', formatter: '{value}' }
    },
    grid: {
        left: '5%',
    },
    series: [
        {
            color: "#4462AA",
            type: 'line',
            data: [5, 20, 36, 10, 10, 5, 20, 36, 10, 10, 5, 20, 36, 10, 10, 5, 100, 36, 10, 10, 5, 300, 36, 10, 10, 5, 20, 36, 10, 10,],
            symbolSize: 0, // 通过设置symbolSize为0来隐藏节点  
        },
    ]
};


// 使用刚指定的配置项和数据显示图表。
export default {
    name: '',
    data() {
        return {
            tabPosition: 'year',
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            dateValue: '',
        }
    },
    components: {

    },


    mounted() {
        console.log("mounted方法执行-----------------------》")

        //初始化柱状图 和数据
        var saleFormChart = echarts.init(this.$refs.saleForm);
        // 使用刚指定的配置项和数据显示图表。
        saleFormChart.setOption(saleOption);

        var saleFormChart = echarts.init(this.$refs.sortPieForm);
        // 使用刚指定的配置项和数据显示图表。
        saleFormChart.setOption(sortPieOption);


         //初始化vip增长图 和数据
        var vipAddFormChat =echarts.init(this.$refs.vipAddForm)
        vipAddFormChat.setOption(vipAddOption)

    },
    methods: {
        //年月日选择
        selectLabel(params) {
            console.log(params)
        },
        //日期选择器
        dateValueChange(value) {
            console.log(value)
            console.log(JSON.stringify(this.dateValue))
        }
    },
}
</script>

<style lang="scss">
.content {
    background-color: #f5f5f5;
    overflow: auto;
    flex-direction: column;

    .top-line {
        display: flex;
        justify-content: flex-end;
    }

    .second-line {
        display: flex;

        .card-white {
            justify-content: center;
            background-color: white;
            border-radius: 10px;
            display: flex;
            flex-direction: column;

            .text1 {
                color: #333;
                margin-left: 23px;
                font-size: 32px;
                font-weight: 400;
            }

            .text2 {
                margin-top: 10px;
                color: #666;
                margin-left: 23px;
                font-size: 20px;
                font-weight: 400;
            }
        }
    }
}
</style>
